<script setup lang="ts">
import {
  GetCaptchaImageRes,
  getCaptchaImage,
  login,
  LoginParams,
  LoginRes,
} from "@/api/security";
import router from "@/router";
import { useGlobalStore } from "@/store/globalStore";
import { useUserStore } from "@/store/userStore";
import { message } from "ant-design-vue";
import { useForm } from "ant-design-vue/es/form";
import Cookies from "js-cookie";
const globalStore = useGlobalStore();
const userStore = useUserStore();
const loading = ref(false);

const formState = reactive<LoginParams>({
  username: "admin",
  password: "123456",
  captchaCode: "",
  uuidKey: "",
  remember: true,
});

const rulesRef = reactive({
  username: [
    {
      required: true,
      message: "请输入账号",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
    },
  ],
  captchaCode: [
    {
      required: globalStore.captchaEnable,
      message: "请输入验证码",
    },
  ],
});

const { validate, validateInfos } = useForm(formState, rulesRef);

const captchaImage = ref<string>("");
const onFinish = () => {
  loading.value = true;
  validate()
    .then(async () => {
      const { data: res }: { data: LoginRes<any> } = (await login(
        toRaw(formState)
      )) as any;
      if (res.code != 200) {
        message.error(res.msg);
      } else {
        //登陆成功
        message.success("登陆成功");
        userStore.accessToken = res.data.accessToken as string;
        userStore.sysUser = res.data.sysUser;
        Cookies.set("accessToken", userStore.accessToken, {
          expires: (res.data.expiresIn || 0) / 60 / 24, //分钟->天
        });
        router.push("/index");
      }
    })
    .catch((err) => {
      console.log("error", err);
    })
    .finally(() => {
      loading.value = false;
    });
};

const getCaptchaImageWrap = async () => {
  const {
    data: res,
  }: { data: GetCaptchaImageRes } = (await getCaptchaImage()) as any;
  captchaImage.value = res.data.image;
  formState.uuidKey = res.data.uuidKey;
};

onMounted(() => {
  getCaptchaImageWrap();
});
</script>

<template>
  <div class="flex items-center justify-center w-screen h-screen dark:bg-darkBg dark:text-white">
    <div class="w-[400px] shadow-lg h-[480px] rounded-lg p-3 dark:bg-darkTabBarBg">
      <div class="flex items-center justify-center w-full h-24">
        LOGO
      </div>
      <div class="w-full px-6 mt-4">
        <a-form :model="formState" name="basic" autocomplete="off">
          <a-form-item name="username" v-bind="validateInfos.username">
            <a-input v-model:value="formState.username" placeholder="账号" />
          </a-form-item>

          <a-form-item name="password" v-bind="validateInfos.password">
            <a-input-password
              v-model:value="formState.password"
              placeholder="密码"
            />
          </a-form-item>

          <a-form-item name="captcha" v-bind="validateInfos.captchaCode">
            <a-space class="flex items-center w-full">
              <a-input
                v-model:value="formState.captchaCode"
                :placeholder="
                  globalStore.captchaEnable ? '验证码' : '验证码功能已禁用'
                "
                :disabled="!globalStore.captchaEnable"
              />
              <img
                class="float-right w-24 cursor-pointer"
                :src="'data:image/jpg;base64,' + captchaImage"
                alt=""
                @click="getCaptchaImageWrap"
              />
            </a-space>
          </a-form-item>

          <a-form-item name="remember" :wrapper-col="{ offset: 0, span: 16 }">
            <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
          </a-form-item>

          <a-form-item>
            <a-button
              type="primary"
              html-type="submit"
              class="w-full bg-primary-2"
              @click.prevent="onFinish"
              :loading="loading"
              >登录</a-button
            >
          </a-form-item>
        </a-form>

        <div class="flex justify-center w-full text-sm">
          <div class="flex-1 text-left">
            <span class="transition-all cursor-pointer hover:text-primary"
              >注册</span
            >
          </div>
          <div class="flex-1 text-right">
            <span class="transition-all cursor-pointer hover:text-primary"
              >忘记密码</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
